<template>
	<div class="container">
		<div class="smallContainer1">
			<div id="myChart1"></div>
		</div>
		<div id="myChart2">
			<div id="chart1"></div>
			<div id="chart2"></div>
			<div class="progress">
				<div class="font">
					<div>当前数量/最大值</div>
					<div>{{ curCount }}条/{{ Math.floor(curCount / maxCount * 100) }}%</div>
				</div>
				<el-progress class="progressItem" :percentage="Math.floor(curCount / maxCount * 100)" :stroke-width="10"
					:show-text="false" />
				<div class="font">
					<div>良好/当前数量</div>
					<div>{{ normalCount }}条/{{ Math.floor(normalCount / maxCount * 100) }}%</div>
				</div>
				<el-progress status="success" class="progressItem"
					:percentage="Math.floor(normalCount / maxCount * 100)" :stroke-width="10" :show-text="false" />
				<div class="font">
					<div>生病/当前数量</div>
					<div>{{ illCount }}条/{{ Math.floor(illCount / maxCount * 100) }}%</div>
				</div>
				<el-progress status="warning" class="progressItem" :percentage="Math.floor(illCount / maxCount * 100)"
					:stroke-width="10" :show-text="false" />
				<div class="font">
					<div>死亡/当前数量</div>
					<div>{{ deathCount }}条/{{ Math.floor(deathCount / maxCount * 100) }}%</div>
				</div>
				<el-progress status="exception" class="progressItem"
					:percentage="Math.floor(deathCount / maxCount * 100)" :stroke-width="10" :show-text="false" />
			</div>
		</div>
		<div class="smallContainer2">
			<div id="myChart3"></div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount } from "vue";
import * as echarts from 'echarts'
import { ApiGetBar, ApiGetNightingale, ApiGetPie, ApiGetProgress, ApiGetLine } from "@/apis/echarts";
import { ref } from 'vue'
let echartInstance1: any
let echartInstance2: any
let echartInstance3: any
let echartInstance4: any
let maxCount = ref(0)
let curCount = ref(0)
let deathCount = ref(0)
let illCount = ref(0)
let normalCount = ref(0)
onMounted(() => {

	async function getBar() {

		let { fishCountVo } = await ApiGetBar()
		const { xaxis } = fishCountVo
		const { yaxis } = fishCountVo
		echartInstance1 = echarts.init(document.getElementById('myChart1') as HTMLElement)

		const option = {
			title: {
				text: '近周鱼缸鱼数统计'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
					crossStyle: {
						color: '#fff'
					}
				}
			},
			toolbox: {
				show: true,
				feature: {
					dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar'] },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},
			xAxis: {
				type: 'category',
				data: xaxis
			},
			yAxis: {
				type: 'value',
				axisLine: {
					show: true
				},
				axisTick: {
					show: true
				}
			},
			series: [
				{
					data: yaxis,
					type: 'bar',
					// barWidth: 45,
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(180, 180, 180, 0.2)'
					},

				}
			]
		};
		echartInstance1.setOption(option)
		window.addEventListener("resize", function () {
            echartInstance1.resize();
        });
	}
	getBar()

	async function getLine() {
		let { data } = await ApiGetLine()
		echartInstance3 = echarts.init(document.getElementById('myChart3') as HTMLElement)
		const option = {
			title: {
				text: "近周鱼缸水质统计"
			},
			tooltip: {
				trigger: 'axis'
			},
			toolbox: {
				show: true,
				feature: {
					saveAsImage: { show: true }
				}
			},
			legend: {
				data: ['电导率', '浑浊度', 'ph', '温度']
			},
			xAxis: {
				type: 'category',
				data: data.listWeek
			},
			yAxis: {
				type: 'value',
				axisLine: {
					show: true
				},
				axisTick: {
					show: true
				}
			},
			series: [
				{
					name: '电导率',
					data: data.diandao,
					type: 'line'
				},
				{
					name: '浑浊度',
					data: data.hunzhuo,
					type: 'line'
				},
				{
					name: 'ph',
					data: data.ph,
					type: 'line'
				},
				{
					name: '温度',
					data: data.wendu,
					type: 'line'
				}
			]
		};
		echartInstance3.setOption(option)
		window.addEventListener("resize", function () {
            echartInstance3.resize();
        });
	}
	getLine()

	async function getNightingale() {
		let { resList } = await ApiGetNightingale()
		echartInstance2 = echarts.init(document.getElementById('chart1') as HTMLElement)
		const option = {
			title: {
				text: '鱼类统计',
				top: '5%',
				left: '2%'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{b}'
			},
			legend: {
				bottom: '4%',
				left: 'center'
			},
			series: [
				{
					name: 'Nightingale Chart',
					type: 'pie',
					radius: ['20%', '80%'],
					center: ['50%', '42%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 8
					},
					emphasis: {
						label: {
							show: false
						}
					},
					data: resList,
					label: {
						show: false
					},

				}
			]
		};
		echartInstance2.setOption(option)
		window.addEventListener("resize", function () {
            echartInstance2.resize();
        });
	}
	getNightingale()

	async function getPie() {
		let { stateCountList } = await ApiGetPie()
		echartInstance4 = echarts.init(document.getElementById('chart2') as HTMLElement)
		const option = {
			tooltip: {
				trigger: 'item',
				formatter: '{b}:\xa0\xa0\xa0{c}'
			},
			legend: {
				top: '30%',
				left: '7%',
				orient: 'vertical'
			},
			series: [
				{
					name: 'Access From',
					type: 'pie',
					radius: ['55%', '80%'],
					avoidLabelOverlap: false,
					// itemStyle: {
					// 	borderRadius: 10,
					// 	borderColor: '#fff',
					// 	borderWidth: 2
					// },
					itemStyle: {
						normal: {
							borderRadius: 8,
							color: function (params: any) {
								let colorList = [
									"#ee6666",									
									"#40b27d",
									"#fac858",
								]
								return colorList[params.dataIndex]
							}
						}
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: false,
							fontSize: '40',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: stateCountList
				}
			]
		};
		echartInstance4.setOption(option)
		window.addEventListener("resize", function () {
            echartInstance4.resize();
        });
	}
	getPie()

	async function getProgress() {
		let list = await ApiGetProgress()
		curCount.value = list.curCount
		maxCount.value = list.maxCount
		deathCount.value = list.deathCount
		illCount.value = list.illCount
		normalCount.value = list.normalCount
	}
	getProgress()
})
onBeforeUnmount(() => {
	if (echartInstance1) {
		echartInstance1.dispose()
		echartInstance2.dispose()
		echartInstance3.dispose()
		echartInstance4.dispose()
	}

})
</script>

<style scoped lang="scss">

.container {
	position: relative;
	width: 100%;
	height: 100%;
	flex-wrap: wrap;
	background-color: #f2f8f9;

	.smallContainer1 {
		position: relative;
		top: 2%;
		left: 2%;
		width: 60%;
		height: 45%;
		background-color: #ffffff;

		#myChart1 {
			position: absolute;
			top: 5%;
			left: 5%;
			width: 90%;
			height: 95%;
		}
	}

	#myChart2 {
		position: absolute;
		top: 2%;
		right: 3%;
		width: 31%;
		height: 95%;
		background-color: #ffffff;

		#chart1 {
			width: 100%;
			height: 40%;
		}

		#chart2 {
			width: 100%;
			height: 25%;
		}

		.progress {
			width: 100%;
			height: 35%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.font {
				width: 80%;
				display: flex;
				justify-content: space-between;
			}

			.progressItem {
				margin-top: 5px;
				margin-bottom: 18px;
				width: 80%;
			}
		}
	}

	.smallContainer2 {
		position: relative;
		left: 2%;
		top: 7%;
		width: 60%;
		height: 45%;
		background-color: #ffffff;

		#myChart3 {
			position: absolute;
			top: 5%;
			left: 5%;
			width: 90%;
			height: 95%;
		}
	}
}
</style>